<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="200px">
        <el-tree :data="carList" node-key="value" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <TopFilter ref="from" :list="topFilterList" :cols="3" @filterChange="changeHandle"></TopFilter>

          <FilterTable
            ref="table"
            :pageSize="5"
            :pageSizesArray="[5, 10, 20, 30, 50]"
            :height="'auto'"
            :columns="columns"
            :fetchapi="fetchApi"
            :params="fetchParams"
            :datakey="'records'"
            :onRowSelectChange="selectChangeHandle"
            :onColumnsChange="(columns) => (this.columns = columns)"
          >
          </FilterTable>
          <div
            :style="{
              position: 'absolute',
              left: 0,
              bottom: 0,
              right: 0,
              zIndex: 9,
              borderTop: '1px solid #e9e9e9',
              padding: '10px 20px',
              background: '#fff',
              textAlign: 'right',
            }"
          >
            <el-button @click="closeDrawer(1)">取 消</el-button>
            <el-button @click="closeDrawer(2)" type="primary" :disabled="isDisabled">确 定</el-button>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { queryCarListOem, getProductBrandTree, listColor, queryAllOption, queryAllPackage,  listColorTrim, listColorOut } from '@/api/omSaleP/KeyCustomers/OrderSubmission/index.js';
import { getProductPackage, getProductColor, getProductTrimColor, getProductOption } from '@/api/omSaleP/common/productInfo.js';
import { dictionary } from '@/utils/dictMixin';
export default {
  data() {
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryCarListOem,
      fetchParams: {
        dealerCode: this.orderData.dealerCode,
        isOem: 10041001
      },
      selectList: [],
      isDisabled: true,
      carList: [],
      defaultProps: {
        children: 'child',
        label: 'label',
      },
      dealerInfo: {},
      addressDTO: [],
      accountTypeList: [],
    };
  },
  mixins: [dictionary],
  props: ['orderData'],
  created() {
    this.getvehicleList();
  },
  methods: {
    handleNodeClick(val) {
      // console.log('value================>' + val.type, val.value);
      if (val.type === 1) {
        //品牌
        this.fetchParams = Object.assign({}, this.fetchParams);
        this.fetchParams.brandId = Number(val.value);
        this.fetchParams.seriesId = null;
        this.fetchParams.modelId = null;
        this.fetchParams.productCode = null;

        // 选择车型加载配置
        this.getProductPackage(null);
      } else if (val.type === 2) {
        //车系
        this.fetchParams = Object.assign({}, this.fetchParams);
        this.fetchParams.brandId = null;
        this.fetchParams.seriesId = Number(val.value);
        this.fetchParams.modelId = null;
        this.fetchParams.productCode = null;

        // 选择车型加载配置
        this.getProductPackage(null);
      } else if (val.type === 3) {
        //车型
        this.fetchParams = Object.assign({}, this.fetchParams);
        this.fetchParams.brandId = null;
        this.fetchParams.seriesId = null;
        this.fetchParams.modelId = Number(val.value);
        this.fetchParams.productCode = null;

        // 选择车型加载配置
        this.getProductPackage(this.fetchParams.modelId);
      }
      this.$refs.from.SUBMIT_FORM();
    },
    async getProductPackage(modelId) {
      this.fetchParams.configId = '';
      this.fetchParams.colorId = '';
      this.fetchParams.trimColorId = '';
      this.fetchParams.optionCode = '';

      this.topFilterList.find((item) => item.fieldName === 'configId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'configId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'colorId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'colorId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'trimColorId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionCode').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionCode').itemList = [];

      if (modelId === null || modelId === '') {
        return;
      }
      const res = await getProductPackage(this.fetchParams);
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'configId').itemList.push({ text: x.configName, value: x.packageId });
        });
      }
    },
    async changePackageSelect(packageId){
      this.fetchParams.configId = packageId;
      this.fetchParams.colorId = '';
      this.fetchParams.trimColorId = '';
      this.fetchParams.optionCode = '';

      this.topFilterList.find((item) => item.fieldName === 'colorId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'colorId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'trimColorId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionCode').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionCode').itemList = [];

      if (packageId === null || packageId === '') {
        return;
      }
      const res = await getProductColor(this.fetchParams);
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'colorId').itemList.push({ text: x.colorName, value: x.colorId });
        });
      }
    },
    async changeColorSelect(colorId){
      this.fetchParams.colorId = colorId;
      this.fetchParams.trimColorId = '';
      this.fetchParams.optionCode = '';

      this.topFilterList.find((item) => item.fieldName === 'trimColorId').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList = [];
      this.topFilterList.find((item) => item.fieldName === 'optionCode').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionCode').itemList = [];

      if (colorId === null || colorId === '') {
        return;
      }
      const res = await getProductTrimColor(this.fetchParams);
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'trimColorId').itemList.push({ text: x.colorName, value: x.colorId });
        });
      }
    },
    async changeTrimColorSelect(trimColorId){
      this.fetchParams.trimColorId = trimColorId;

      this.topFilterList.find((item) => item.fieldName === 'optionCode').initialValue = '';
      this.topFilterList.find((item) => item.fieldName === 'optionCode').itemList = [];

      if (trimColorId === null || trimColorId === '') {
        return;
      }
      const res = await getProductOption(this.fetchParams);
      if (res.resultCode === 200) {
        res.data.map((x) => {
          this.topFilterList.find((item) => item.fieldName === 'optionCode').itemList.push({ text: x.optionName, value: x.optionCode });
        });
      }
    },
    async changeOptionCodeSelect(optionCode){
      this.fetchParams.optionCode = optionCode;
    },
    async getvehicleList() {
      let res = await getProductBrandTree();
      this.carList = res.data;
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
    },
    closeDrawer(type) {
      if (type === 1) {
        this.$emit('close');
      } else {
        let json = this.selectList;
        this.isOpen = true;
        this.$emit('close', json, this.orderData);
      }
    },
    selectChangeHandle(rows) {
      if (rows.length > 0) {
        this.selectList = rows;
        this.isDisabled = false;
        return;
      }
      this.isDisabled = true;
    },

    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '物料编码',
          fieldName: 'productCode',
          placeholder: '请输入',
        },
        {
          type: 'SELECT',
          label: '配置',
          fieldName: 'configId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changePackageSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '外饰',
          fieldName: 'colorId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeColorSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '内饰',
          fieldName: 'trimColorId',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeTrimColorSelect(val);
          },
        },
        {
          type: 'SELECT',
          label: '选装',
          fieldName: 'optionCode',
          placeholder: '请选择',
          itemList: [],
          change: (val) => {
            this.changeOptionCodeSelect(val);
          },
        },
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '物料编码',
          dataIndex: 'productCode',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '物料描述',
          dataIndex: 'productName',
          width: 400,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '配置',
          dataIndex: 'configName',
          width: 200,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '外饰',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '内饰',
          dataIndex: 'trimColorName',
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '选装',
          dataIndex: 'optionName',
          width: 300,
          sorter: true,
          filter: true,
          filterType: 'input',
        },
        {
          title: '市场指导价',
          dataIndex: 'oemDirectivePrice',
          hidden: true,
        },
      ];
    },
  },
};
</script>
